<template>
  <div class="news-layout">
    <div class="new-list">
      <h1>News</h1>
      <ul>
        <li v-for="item in newsList" :key="item.id">
          <button @click="viewDetail(item)">查看详情</button>
          <router-link
            :to="{
              path: '/news/detail',
              query: {
                id: item.id,
                title: item.title,
                content: item.content,
              },
            }"
            >{{ item.title }}</router-link
          >
        </li>
      </ul>
    </div>
    <div class="news-detail">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
function viewDetail(item: any) {
  router.push({
    name: "NewsDetail",
    query: {
      id: item.id,
      title: item.title,
      content: item.content,
    },
  });
}
let newsList = reactive([
  { id: 1, title: "新闻1", content: "内容1" },
  { id: 2, title: "新闻2", content: "内容2" },
  { id: 3, title: "新闻3", content: "内容3" },
]);
</script>

<style lang="scss" scoped>
.news-layout {
  display: flex;
  gap: 20px; /* 两栏间距 */
  height: 100%;
}
.new-list {
  width: 200px;
  list-style: none;
  padding: 0;
  margin: 0;
  border-right: 1 solid #eee;
}
.news-detail {
  flex: 1; /* 右侧占剩余空间 */
  padding-left: 20px;
}
</style>
